<template>
  <div>
    <van-nav-bar
      title="消息"
      :fixed="true"
    />
    <div>
      <!--通知栏-->
      <van-notice-bar
        color="#1989fa"
        background="#ecf9ff"
        left-icon="volume-o"
        text="通知内容"
        :scrollable="true"
      >
        通知内容
      </van-notice-bar>
    </div>
    <div style="margin-top: 5%">

      <van-tabs v-model="activeName" @click="onClick">
        <van-tab title="公告" name="a">
          <!--消息-->
          <div>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
              <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
              >
                <van-cell-group v-for="item in listPub" :key="item.mesId" :id="item.mesId">
                  <van-cell :title="item.noticeTitle" value="内容" @click="showDetail(item.mesId)">
                    <p>时间：{{item.createTime}}</p>
                    <p>发布人：{{item.createBy}}</p>
                    <p>内容：{{item.content}}</p>
                  </van-cell>
                </van-cell-group>
              </van-list>
            </van-pull-refresh>
          </div>

        </van-tab>
        <van-tab title="通知" name="b">
          <div>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
              <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
              >
                <div >
                  <van-cell-group v-for="item in listMes" :key="item.mesId" :id="item.mesId">
                    <van-cell :title="item.noticeTitle" value="内容" @click="showDetail(item.mesId)">
                      <p>时间：{{item.createTime}}</p>
                      <p>发布人：{{item.createBy}}</p>
                      <p>内容：{{item.content}}</p>
                    </van-cell>
                  </van-cell-group>
                </div>
              </van-list>
            </van-pull-refresh>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'vant';
  import newsDatas from './datas'
  import newApi from '@/api/news'
  import user from "../../store/modules/user";

  export default {
    name: "index",
    data() {
      return {
        radio: 1,
        resume: {
          choose: ''
        },
        userInfoId:null,
        data:{
          noticeType: '',
          noticeTitle: '',
        },
        show: false,
        actions: [
          {name: '选项', color: '#07c160'},
          {loading: true},
          {name: '禁用选项', disabled: true}
        ],
        scanWidth: '',
        active: 0,
        activeName: 'a',
        items: [{text: '分组 1'}, {text: '分组 2'}],
        tital: '11',
        listPub: [],
        listMes: [],
        loading: false,
        finished: false,
        refreshing: false
      }
    },
    mounted() {
      this.scanWidth = document.documentElement.clientWidth
    },
    created() {
      this.getDataPub();
      this.getDataMes();
    },
    computed: {
      WuserInfo() {
        return this.$store.getters.userInfo.userId;
      }
    },
    watch: {
      //基数
      WuserInfo(val) {
        this.userInfoId = val;
      },
    },
    methods: {
      //公告数据
      getDataPub() {
        console.log("用户信息：")
        // console.log(this.$store.state.user.userInfo)
        console.log(this.$store.getters.userInfo)
        console.log(this.$store.getters.userInfo.userId)
       /* console.log(this.$store.state.user.info.userId)
        console.log(this.$store.state.user.info.deptId)
        console.log(this.$store.state.user.info.nickName)*/
        this.current = 1;
        this.loading = true;
        newApi.findByPage({
          noticeType: 1,//类型（1代表公告，2代表通知）
          noticeTitle: this.data.noticeTitle,
        })
          .then(res => {
            // 返回数据
            this.listPub = res;
            this.loading = false;
            this.data.noticeTitle = '';
          })
          .catch(err => {
            // 异常情况
          })

      },
      //消息数据
      getDataMes() {
        this.current = 1;
        this.loading = true;
        newApi.findByPage({
          noticeType: 2,//类型（1代表公告，2代表通知）
          noticeTitle: this.data.noticeTitle,
        })
          .then(res => {
            // 返回数据
            this.listMes = res;
            this.loading = false;
            this.data.noticeTitle = '';
          })
          .catch(err => {
            // 异常情况
          })

      },
      /*getData() {
        this.current = 1;
        this.loading = true;
        this.$axios.post('/apis/messages/findByPage', {
          noticeType: this.data.noticeType,
          noticeTitle: this.data.noticeTitle,
        })
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });

      },*/
      test() {
        this.show = true;
        setTimeout(function () {
          Toast.success('成功文案');
        }, 2000)
      },
      onClick(name, title) {
        // Toast(title+name);
      },
      showDetail(mesId) {
        //获取数据唯一识标志，通过路由传参，跳转页面，查询对应详情,query或者params
        this.$router.push({
          path: '/news/detail',
          query: {
            mesId
          }
        });
        // console.log(e.currentTarget.time)
        // console.log(e.currentTarget.innerText)


      },

      /*加载*/
      onLoad() {
        console.log(this.scanWidth);
        setTimeout(() => {
          if (!this.refreshing) {
            this.list = newsDatas;
            this.refreshing = false;
          }

          this.loading = false;

          // 数据全部加载完成
          if (this.list.length >= 5) {
            this.finished = true;
          }

        }, 1000);
        this.loading = false;

      },
      onRefresh() {
        // 清空列表数据
        this.finished = false;
        Toast('刷新成功');

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.refreshing = false;
        this.onLoad();
      }


    }
  }
</script>

<style scoped>
  @media all and (min-width: 400px) {

  }

</style>
